<template>
  <div class="itemBody skin1">
    <div class="itemBodyIcon">
      <!--<icon :status="1"></icon>-->
      <img v-if="index===1" src="./assets/jiangbei.png" style="height: 80%;" alt="">
      <img v-else-if="index===2" src="./assets/jiangbei2.png" style="height: 80%;" alt="">
      <img v-else-if="index===3" src="./assets/jiangbei3.png" style="height: 80%;" alt="">
      <dome v-else :number="index"></dome>
    </div>
    <div class="itemBodyInfo">
      <div class="itemBodyInfoTop">
        <span style="display: inline-block;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">{{item.name}}</span>
      </div>
      <!--<div class="itemBodyInfoBottom">
        <div class="itemBodyInfoBottomLeft">
          <p>状态：</p>
          <span>{{item.itemStatus==0?'未开始':item.itemStatus==1?'进行中':'已完成'}}</span>
        </div>
        <div class="itemBodyInfoBottomRight">
          <p>类型：</p>
          <span>{{item.itemType}}</span>
        </div>
      </div>-->
    </div>
    <div class="itemBodyIcon2">
      <div class="icon" ref="icon"></div>
    </div>
    <div class="itemBodyInfo2">
      <!--<div class="itemBodyInfo2Item">
        <div class="itemBodyInfo2ItemTop">
          <span>目标</span>
        </div>
        <div class="itemBodyInfo2ItemBottom">
          <span>{{item.targetAmount}}{{item.unit}}</span>
        </div>
      </div>-->
      <div class="itemBodyInfo2Item">
        <div class="itemBodyInfo2ItemTop">
          <span>达成比例</span>
        </div>
        <div class="itemBodyInfo2ItemBottom">
          <!--v-if="item.name!=='电商平台'"-->
          <span>{{(item.percentage*100).toFixed(2)}}%</span>
          <!--<span v-else>...</span>-->
        </div>
      </div>
      <!--<div class="itemBodyInfo2Item">
        <div class="itemBodyInfo2ItemTop">
          <span>合同签订额</span>
        </div>
        <div class="itemBodyInfo2ItemBottom">
          <em>{{item.itemAmount}}</em>
        </div>
      </div>-->
    </div>
  </div>
</template>

<script>
import icon from './icon.vue'
import dome from './dome.vue'
import { gsap } from 'gsap'

export default {
  name: 'index',
  data () {
    return {}
  },
  components: { icon,dome },
  props: {
    item: {
      type: Object,
      default () {
        return {}
      }
    },
    index: {
      type: [Number,String],
      default:1
    }
  },
  mounted () {
    // 选择你要动画的元素
    const icon = this.$refs.icon

    // 创建一个左右晃动的动画
    gsap.to(icon, {
      x: 10, // 横向移动的距离
      repeat: -1, // 无限次重复
      yoyo: true, // 往返动画
      ease: 'power1.inOut', // 缓动函数
      duration: 1 // 持续时间，单位秒
    })
  }
}
</script>

<style lang="scss" scoped>
.itemBody{
  position: relative;
  width: 100%;
  height: calc(100% - 0px);
  background: url("./assets/skin3/bg.png") no-repeat;
  background-size: 100% 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: nowrap;
  flex-direction: row;
  align-content: flex-start;

  .itemBodyIcon {
    width: 128px;
    position: relative;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    flex-direction: row;
    align-content: flex-start;
  }

  .itemBodyInfo {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: nowrap;
    flex-direction: column;
    align-content: flex-start;
    width: calc(40% - 140px);

    .itemBodyInfoTop {
      font-size: 18px;
      font-family: PingFang SC, PingFang SC;
      font-weight: bold;
      color: #FFFFFF;
      //margin-bottom: 10px;
    }

    .itemBodyInfoBottom {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: nowrap;
      flex-direction: row;
      align-content: flex-start;
      width: 100%;

      .itemBodyInfoBottomLeft {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        flex-wrap: nowrap;
        flex-direction: row;
        align-content: flex-start;

        p {
          font-size: 14px;
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          color: #B8CCFF;
        }

        span {
          font-size: 14px;
          font-family: PingFang SC, PingFang SC;
          font-weight: bold;
          color: #00C2FF;
        }
      }

      .itemBodyInfoBottomRight {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        flex-wrap: nowrap;
        flex-direction: row;
        align-content: flex-start;

        p {
          font-size: 14px;
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          color: #B8CCFF;
        }

        span {
          font-size: 14px;
          font-family: DIN, DIN;
          font-weight: bold;
          color: #00F0FF;
        }

        em {
          font-size: 14px;
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          color: #B8CCFF;
          font-style: normal;
        }
      }
    }
  }

  .itemBodyIcon2 {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    flex-direction: row;
    align-content: flex-start;
    width: 57px;
    height: 33px;

    .icon {
      background: url("./assets/skin3/right.png") no-repeat;
      width: 24px;
      height: 33px;
      background-size: 100% 100%;
    }
  }

  .itemBodyInfo2 {
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: nowrap;
    flex-direction: row;
    align-content: flex-start;
    width: 60%;

    .itemBodyInfo2Item {
      display: flex;
      justify-content: center;
      align-items: flex-start;
      flex-wrap: nowrap;
      //flex-direction: column;
      align-content: flex-start;
      width: 100%;

      .itemBodyInfo2ItemTop {
        font-size: 17px;
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        color: #B8CCFF;
        width: 50%;
        text-align: right;
        padding-right: 30px;
      }

      .itemBodyInfo2ItemBottom {
        font-size: 17px;
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        color: #FAFBFF;
        width: 50%;
        text-align: right;
        padding-right: 30px;
        em {
          font-size: 16px;
          font-family: DIN, DIN;
          font-weight: bold;
          color: #00FFFF;
          font-style: normal;
          margin-right: 5px;
        }
      }
    }
  }
}

.itemBody.skin1 {
  background: url("./assets/skin1/bg.png") no-repeat;
  background-size: 100% 100%;

  .itemBodyInfo {
    .itemBodyInfoBottom {
      .itemBodyInfoBottomRight {
        span {
          color: rgba(255, 184, 1, 1);
        }
      }

      .itemBodyInfoBottomLeft {
        span {
          color: rgba(255, 184, 1, 1);
        }
      }
    }
  }

  .itemBodyIcon2 {
    .icon {
      background: url("./assets/skin1/right.png") no-repeat;
      width: 24px;
      height: 33px;
      background-size: 100% 100%;
    }
  }

  .itemBodyInfo2 {
    .itemBodyInfo2Item {
      .itemBodyInfo2ItemBottom {
        em {
          color: rgba(255, 184, 1, 1);
        }
      }
    }
  }
}

.itemBody.skin2 {
  background: url("./assets/skin2/bg.png") no-repeat;
  background-size: 100% 100%;

  .itemBodyInfo {
    .itemBodyInfoBottom {
      .itemBodyInfoBottomRight {
        span {
          color: rgba(38, 255, 98, 1);
        }
      }

      .itemBodyInfoBottomLeft {
        span {
          color: rgba(38, 255, 98, 1);
        }
      }
    }
  }

  .itemBodyIcon2 {
    .icon {
      background: url("./assets/skin2/right.png") no-repeat;
      width: 24px;
      height: 33px;
      background-size: 100% 100%;
    }
  }

  .itemBodyInfo2 {
    .itemBodyInfo2Item {
      .itemBodyInfo2ItemBottom {
        em {
          color: rgba(38, 255, 98, 1);
        }
      }
    }
  }
}

.itemBody.skin3 {
  background: url("./assets/skin3/bg.png") no-repeat;
  background-size: 100% 100%;

  /* .itemBodyInfo {

    .itemBodyInfoBottom {
      .itemBodyInfoBottomRight {
        span {
          color: rgba(38, 255, 98, 1);
        }
      }

      .itemBodyInfoBottomLeft {
        span {
          color: rgba(38, 255, 98, 1);
        }
      }
    }
  } */

  .itemBodyIcon2 {
    .icon {
      background: url("./assets/skin3/right.png") no-repeat;
      width: 24px;
      height: 33px;
      background-size: 100% 100%;
    }
  }

  /* .itemBodyInfo2 {
    .itemBodyInfo2Item {
      .itemBodyInfo2ItemBottom {
        em {
          color: rgba(38, 255, 98, 1);
        }
      }
    }
  } */
}
</style>
